<template>
  <div class="news-video">
    <div class="text">
      <div class="title"><span class="wait">《等着我》</span>【相关视频】</div>
      <div class="content">
        旨在发挥国家力量，打造全媒体平台帮助更多人圆自己的寻人团聚梦，
        它既是一档节目，同时也是一次国家力量全民范围的公益寻人活动。
      </div>
    </div>
    <div class="videos">
      <div class="items" v-for="(item, index) in videoList" :key="index">
        <a :href="item.video_link" target="_blank" class="imgss">
          <img :src="item.video_img" alt="" />
        </a>
        <div class="infos">
          <a :href="item.video_link" class="infos-title" target="_blank">{{
            item.video_title
          }}</a>
          <div class="infos-cont">
            {{ item.video_con }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getVideo } from "@/server/news";
import { ref, onMounted } from "vue";
const videoList = ref<any>([]);

onMounted(async () => {
  await getVideoList();
});
const getVideoList = () => {
  getVideo().then((res: any) => {
    videoList.value = res.list.splice(0, 3);
  });
};
</script>

<style lang="less" scoped>
.news-video {
  // background-color: #eee;
  border-radius: 10px;
  padding: 20px 200px;
  margin-bottom: 100px;
  .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-weight: bolder;
      font-size: 32px;
      .wait {
        font-weight: bolder;
        color: red;
      }
    }
    .content {
      width: 50%;
      text-indent: 2em;
      margin: 30px 0;
      font-size: 16px;
    }
  }
  .videos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    .items {
      display: flex;
      flex-direction: column;
      background-color: #eee;
      border-radius: 10px;
      box-shadow: 0 0 5px 5px #e3e3e3;
      .imgss {
        height: 220px;
        img {
          border-radius: 10px 10px 0 0;
          width: 100%;
          height: 100%;
        }
      }
      .infos {
        display: flex;
        flex-direction: column;
        &-title {
          text-align: center;
          font-size: 18px;
          font-weight: bolder;
          padding: 10px 20px;
        }
        &-title:hover{
          color: #c03030;
        }
        &-cont {
          text-indent: 2em;
          padding: 15px;
        }
      }
    }
  }
}
</style>
